<template>
	<div v-for="item in talkList">
		<!-- Notice/Center -->
		<div class="chat-notice">
			<span>{{ item.time }}</span>
		</div>
		<!-- Right -->
		<div class="chat-receiver">
			<div><img src="@/assets/favicon.ico" /></div>
			<div>{{ item.nameRight }}</div>
			<div>
				<div class="chat-right_triangle"></div>
				<span>
					{{ item.contentRight }}
				</span>
			</div>
		</div>
		<!-- Left -->
		<div class="chat-sender">
			<div><img :src="avatar" /></div>
			<div>{{ item.nameLeft }}</div>
			<div>
				<div class="chat-left_triangle"></div>
				<span>{{ item.contentLeft }}</span>
			</div>
		</div>
	</div>
</template>

<script setup>
const props = defineProps({
	talkList: Array,
	avatar: String,
})
</script>

<style scoped>
.chat-sender {
	clear: both;
	font-size: 80%;

	img {
		margin-top: 15px;
	}
}
.chat-sender div:nth-of-type(1) {
	float: left;
	margin-left: 20px;
}
.chat-sender div:nth-of-type(2) {
	margin: 0 50px 2px 80px;
	padding: 0px;
	color: #ffffff;
	font-size: 70%;
	text-align: left;
}
.chat-sender div:nth-of-type(3) {
	background-color: white;
	/*float: left;*/
	margin: 0 80px 10px 80px;
	padding: 10px 10px 10px 10px;
	border-radius: 7px;
	text-indent: -30px;
}

.chat-receiver {
	clear: both;
	font-size: 80%;

	img {
		margin-top: 15px;
	}
}
.chat-receiver div:nth-of-type(1) {
	float: right;
	margin-right: 20px;
}
.chat-receiver div:nth-of-type(2) {
	margin: 0px 80px 2px 50px;
	padding: 0px;
	color: #ffffff;
	font-size: 70%;
	text-align: right;
}
.chat-receiver div:nth-of-type(3) {
	/*float:right;*/
	background-color: #b2e281;
	margin: 0 80px 10px 80px;
	padding: 10px 10px 10px 10px;
	border-radius: 7px;
	/* text-indent: 5px; */
}

.chat-receiver div:first-child img,
.chat-sender div:first-child img {
	width: 40px;
	height: 40px;
	/*border-radius: 10%;*/
}

.chat-left_triangle {
	height: 0px;
	width: 0px;
	border-width: 6px;
	border-style: solid;
	border-color: transparent white transparent transparent;
	position: relative;
	left: -40px;
	top: 3px;
}
.chat-right_triangle {
	height: 0px;
	width: 0px;
	border-width: 6px;
	border-style: solid;
	border-color: transparent transparent transparent #b2e281;
	position: relative;
	right: -40px;
	top: 3px;
}

.chat-notice {
	clear: both;
	font-size: 70%;
	color: white;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 15px;
}
.chat-notice span {
	background-color: #cecece;
	line-height: 25px;
	border-radius: 5px;
	padding: 5px 10px;
}
</style>
